<template>
  <!-- 轮播图管理 -->
  <!-- 杨友朋 -->
  <div>
  <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-home" style="font-weight:bold"></i>  后台管理</el-breadcrumb-item>
        <el-breadcrumb-item><b>轮播图管理</b></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
      <div style="float:left;width:200px;margin-bottom:20px">
        <el-button @click="imagesAdd()" type="primary" size="small">上传图片</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delBetch" >
            <el-button type="primary" size="small" slot="reference" style="margin-left: 5px">批量删除</el-button>
          </el-popconfirm>
        </div>
        <div style="background-color: white; margin-top: 10px">
          <!-- 全查 -->
          <el-table :data="imageData" style="width: 98%; margin-top: 10px; margin-left: 15px" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column  label="图片" width="" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.imageId">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="imageInfo" label="轮播图信息" width="" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="上传时间" width="" align="center">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row.id)" type="primary" size="small" >删除</el-button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total" background
            :current-page.sync="pages.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
        <!-- 添加单图片 -->
        <el-dialog :visible.sync="physicianViews" width="40%" center>
          <el-form :model="updateForm" ref="updateForm">
            <el-form-item >
              <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" style="margin-left: 280px"
                :before-upload="beforeAvatarUpload" >
                <img height="200" v-if="imageFile" :src="imageFile" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-input v-model="updateForm.imageInfo" placeholder="请输入轮播图信息"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="physicianViews = false">取 消</el-button>
            <el-button type="primary" @click="update('updateForm')">确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 添加多图片 -->
        <el-dialog title="上传轮播图" :visible.sync="imageAddViews" width="35%">
            <el-form :model="updateForm"  ref="updateForm" label-width="100px">
                <!-- 添加图片 -->
                <el-form-item label="轮播图图片" >
                    <el-upload action="123123123" list-type="picture-card" class="upload-demo" :file-list="fileList1" :on-remove="afileremove" :before-upload="auploadbefore">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="轮播图信息" prop="commodityName">
                    <el-input v-model="updateForm.imageInfo"></el-input>
                </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="imageAddViews = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('updateForm')">确 定</el-button>
        </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //教师信息数组
      imageData: [],
      //单图片添加页面开关
      physicianViews:false,
      //多图片添加页面开关
      imageAddViews:false,
      //图片信息表单
      updateForm:{
        //图片信息
        imageInfo:''
      },
      //图片路径回显
      imageFile:'',
      //添加时赋值
      fileImage:'',
      pages: {
        //数据总条数
        total: 0, 
        //当前页
        pageNum: 1,
        //每页几条数据 
        pageSize: 5, 
      },
      //图片数组
      fileList1:[],
      //回显图片数组
      image:[]
    };
  },
  created() {
    //全查自启动
    this.selectImage();
  },
  methods: {
    //打开单图片添加开关
    imageAdd () {
      //true为打开
      this.physicianViews = true
      this.imageFile = ''
      this.updateForm = {
          imageInfo:''
      }
    },
    //将图片循环存入fileList1
    afileremove(file,filelist){
      for(var a in this.fileList1){
        if(this.fileList1[a].uid == file.uid){
          this.fileList1.splice(parseInt(a),parseInt(a)+1)
        }
      }

    },
    auploadbefore(file){
      this.fileList1.push({url:URL.createObjectURL(file),file:file})
      return false
    },
    //打开多图片添加开关
    imagesAdd() {
      //true为打开
      this.imageAddViews=true
    },
    //添加方法
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // eslint-disable-next-line no-undef
          const formData = new FormData()
          //将图片数据循环存入file
          if (this.fileList1.length !=0) {
            for(var a in this.fileList1){
              formData.append('file', this.fileList1[a].file, this.fileList1[a].file.fileName)
            }
          }
          formData.set('imageInfo',this.updateForm.imageInfo)
          console.log(formData)
          this.$axios.post('/rotationImage/addRotationImages',
            formData
          ).then(res => {
            if (res.code = 200) {
              this.$message.success( '恭喜你，添加成功！')
              // 关闭窗口
              this.imageAddViews = false 
              //清空表单
              this.formData={}
              // 全查刷新
              this.queryCommodityByName()
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    beforeAvatarUpload(file){
      //上传图片格式
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 /1024 < 2
      if(!isJPG && !isPNG){
        this.$message.error('上传图片只能是JPG/PNG格式!')
        return false
      }
      if(!isLt2M){
        this.$message.error('上传图片大小不能超过2MB!')
        return false
      }
      //赋值
      this.fileImage=file
      this.imageFile=URL.createObjectURL(file)
      //isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false
    },
    update (updateForm) { // 添加图片信息
      this.$refs[updateForm].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          if (this.fileImage) {
            formData.set('file', this.fileImage, this.fileImage.name)
            console.log(this.fileImage)
          }
          for (const key in this.updateForm) {
            formData.set(key, this.updateForm[key])
          }
          formData.forEach((value, key) => {
          })
          this.$axios.post('/rotationImage/addRotationImage', formData).then((res) => {
            if (res.data.flag) {
              this.$message.success('上传成功')
              //清空表单
              this.formData={}
              // 关闭窗口
              this.physicianViews = false 
              //刷新
              this.selectImage()
            } else {
              this.$message.error('warning', res.data.code)
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //将选中行的id存入ids
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    //全查轮播图信息
    selectImage(){
      this.$axios
        .get("/rotationImage/selectRotationImage", {
          params: {
            pageNum: this.pages.pageNum,
            pageSize: this.pages.pageSize,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            //给轮播图信息数组赋值
            this.imageData = res.data.data.content;
            const a=res.data.data.content.length;

            for(var i;i<a;i++){
              res.data.data.content[i].imageUrl
            console.log(res.data.data.content[3].imageUrl)

            }
            this.pages.total = res.data.totalSize;
          }
        })
        .catch((err) => {
          
        });
    },
    //根据id删除轮播图信息
    del(id){
      this.$axios
        .get("/rotationImage/deleteRotationImage?id=" + id)
        .then((res) => {
          if (res.data) {
            this.$message.success("删除成功");
                  //刷新
                  this.selectImage()

          } else {
            this.$message.error("删除失败");
          }
        });
    },
    //根据ids批量删除轮播图信息
    delBetch(){
      this.$axios
        .post("/rotationImage/deleteImageByIds", this.ids)
        .then((res) => {
          if (res.data) {
            this.$message.success("批量删除成功");                  
                  //刷新
                  this.selectImage()
          } else {
            this.$message.error("批量删除失败");
          }
        });
    },
    //分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.selectImage();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.selectImage();
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    openadd() {
      this.updateadd = true;
    },
    handleAvatarSuccess() {
        
      },
  },
};
</script>

<style>
</style>